import React, { useState, useEffect } from "react";
import { Breadcrumb, Select, Button, Table, Space,message, } from "antd";
import "./complaint.less";
import axios from "axios";
export default function Complaintsuggestions() {
  const columns = [
    {
      title: "投诉类型",
      dataIndex: "tslx",
    },
    {
      title: "问题描述",
      dataIndex: "wtms",
    },
    {
      title: "处理状态",
      dataIndex: "clzt",
      render: (_, record) => {
        if (record.clzt === 0) {
          return "待处理";
        } else if (record.clzt === 1) {
          return "进行中";
        } else if (record.clzt === 2) {
          return "已完成";
        }
      },
    },
    {
      title: "投诉人姓名",
      dataIndex: "tsrxm",
    },
    {
      title: "手机号码",
      dataIndex: "phone",
    },
    {
      title: "操作",
      dataIndex: "cz",
      render: (_, record) => (
        <Space size="middle">
          <a>详情</a>
        </Space>
      ),
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        selectedRowKeys
      );
    },
  };
  let [arr, setarr] = useState([]);
  const [selectionType, setSelectionType] = useState("checkbox");
  let [page, setpage] = useState(1);
  let [pageSize, setpageSize] = useState(8);
  let [clzt, setclzt] = useState(0);
  let [tsrxm, setttsrxm] = useState("");
  useEffect(() => {
    getcompaint();
  }, []);

  let getcompaint = async () => {
    let {
      data: { code, compls },
    } = await axios.get(`http://localhost:3000/getcomplaint?clzt=${clzt}&tsrxm=${tsrxm}`);
    if (code === 200) {
      setarr(compls);
    }
  };

  let search  = () => {
    getcompaint();
  }
  let del = async (id) => {
    let {
      data: { code, msg },
    } = await axios.delete(`http://localhost:3000/delwarr?id=${id}`);
    if (code === 200) {
      message.success(msg);
      getwarr();
    }
  };
  return (
    <div className="bigbox">
      <div className="header">
        <div className="header1">
          <Breadcrumb
            items={[
              {
                title: "物业服务",
              },
              {
                title: "投诉建议",
              },
            ]}
          />
          <h2>投诉建议</h2>
          <hr />

          {/* 头部类型 */}
          <div style={{ height: "70px", lineHeight: "70px" }}>
            <span>处理状态</span>
            <Select
              defaultValue="全部"
              onChange={(e)=>{setclzt(e)}}
              style={{ width: 240, marginLeft: "30px" }}
              options={[  
                { value: 0, label: "待处理" },
                { value: 1, label: "进行中" },
                { value: 2, label: "已完成" },
              ]}
            />
            <span style={{ display: "inline-block", marginLeft: "50px" }}>
              访客姓名
            </span>
            <input
              type="text"
              style={{
                width: "240px",
                marginLeft: "30px",
                height: "25px",
                borderRadius: "5px",
              }}
              value={tsrxm}
              onChange={(e)=>{setttsrxm(e.target.value)}}
            />
            <Button
              style={{ marginLeft: "90px", width: "80px", height: "40px" }}
              type="primary"
              onClick={search}
            >
              查询
            </Button>
            <Button
              style={{ marginLeft: "10px", width: "80px", height: "40px" }}
              onClick={()=>{setclzt(0), setttsrxm(""),getcompaint()}}
            >
              重置
            </Button>
          </div>
        </div>
      </div>
      <div className="content">
        <div className="content1">
          <p>
            <span>投诉列表</span>
            <Button
              style={{ marginLeft: "80%", width: "100px", height: "40px" }}
            >
              批量操作
            </Button>
          </p>
          <Table
            columns={columns}
            dataSource={arr}
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            pagination={{
              current: page,
              pageSize: pageSize,
              total: arr.length,
              onChange: (page, pageSize) => {
                setpage(page);
                setpageSize(pageSize);
              },
              pageSizeOptions: [8, 10, 15, 20, 30],
              showSizeChanger: true,
              showQuickJumper: true,
            }}
            rowKey={"_id"}
          />
        </div>
      </div>
    </div>
  );
}
